<template>
  <form
    @submit.prevent="
      () => {
        return false
      }
    "
    class="img-detail"
  >
    <div class="game-con-info" @scroll="loadMore">
      <div class="info-detail-mask" @click="handleClose"></div>
      <div class="game-info">
        <imgInfo :imgid="imgid" :imgurl="imgurl" :olist="olist" :viewidx="viewidx" @close="handleClose" ref="refImgInfo"/>
      </div>
    </div>
  </form>
</template>

<script>
import ImgInfo from '@/components/info/img'
import api from '@/api/api'
import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
export default {
  data() {
    return {
      scrollLoaded: true,
      hasMore: true,
      curImgId: '',
      imgParams: {
        page: 1,
        pageSize: 30,
      },
      list: [],
      info: {
        tagsArray: [],
        article: {},
      },
    }
  },
  components: {
    Waterfall,
    WaterfallSlot,ImgInfo
  },
  watch: {
    imgid() {
      this.curImgId = this.imgid
    },
  },
  props: ['imgid', 'imgurl','olist','viewidx'],
  methods: {
    loadMore(e) {
        this.$refs['refImgInfo'].loadMore(e);
        return;
      const { scrollTop, scrollHeight, clientHeight } = e.target
      if (scrollTop + clientHeight >= scrollHeight - 100) {
        if (this.scrollLoaded && this.hasMore) {
          this.scrollLoaded = false
          this.imgParams.page++
          this.queryResembleImgList()
        }
      }
    },
    // 获取原图地址
    getImgUrl() {
      return `https://img.gameui.net/${this.curImgId}.webp`
    },
    // 获取图片地址
    getSrc(id, width, version = 0) {
      return `https://img.gameui.net/${id}-${version}@1x${width}.webp`
    },
    // 获取图片地址srcset
    getSrcset(id, width, version = 0) {
      const magnification = [1, 2, 3]
      return magnification
        .map((item) => {
          return `https://img.gameui.net/${id}-${version}@${item}x${width}.webp ${item}x`
        })
        .join(',')
    },
    handleClose() {
      this.$emit('close')
    },
    onPicSearch(list) {
      let that = this
      let tpdata = list
      tpdata.forEach((item) => {
        item.title = item.article.title
        if (!item.thumbnailBean) {
          item.thumbnailBean = {
            bigThumbnail: item.larger_image,
            thumbnail: item.thumbnail_image,
            imageWidth: item.width,
            imageHeight: item.height,
            gameFuncTags: item.article.tags ? item.article.tags.split(',') : [],
            gameMaterialTags: [],
            imagesOcrList: [],
            id: item.id,
          }
        }
        item.ratios = []
        item.width = parseInt(item.thumbnailBean.imageWidth)
        item.height = parseInt(item.thumbnailBean.imageHeight)
        if (item.tags) {
          item.tags = item.tags.split(',')
        } else {
          item.tags = []
        }
        item.src = item.thumbnailBean.bigThumbnail
        item.lazy = {
          src: item.thumbnailBean.thumbnail,
          error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
          loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
        }
        if ((item.width == 1920 && item.height == 1920) || (item.width == 418 && item.height == 418)) {
          item.w = item.width
          item.h = item.height
          item.sw = item.w
          item.sh = item.h
          if (item.thumbnailBean.imagesOcrList) {
            item.thumbnailBean.imagesOcrList.map((image) => {
              item.ratios.push({
                left: (((image.centerX - image.width / 2) / item.w) * 100) / (item.w / image.width) + '%',
                top: (((image.centerY - image.height / 2) / item.h) * 100) / (item.h / image.height) + '%',
                twidth: ((image.width / item.width) * 100) / (item.w / image.width) + '%',
                theight: ((image.height / item.height) * 100) / (item.h / image.height) + '%',
                otwidth: image.width,
                otheight: image.height,
                otcenterX: image.centerX,
                otcenterY: image.centerY,
                imgWidth: item.w,
                imgHeight: item.h,
              })
            })

            item.gwidth = item.w
            item.gheight = item.h
          }
        } else {
          item.w = item.thumbnailBean.imageWidth
          item.h = item.thumbnailBean.imageHeight
          item.sw = item.w
          item.sh = item.h
          if (item.thumbnailBean.imagesOcrList) {
            item.thumbnailBean.imagesOcrList.map((image) => {
              item.ratios.push({
                left: (((image.centerX - image.width / 2) / item.w) * 100) / (item.w / image.width) + '%',
                top: (((image.centerY - image.height / 2) / item.h) * 100) / (item.h / image.height) + '%',
                twidth: ((image.width / item.width) * 100) / (item.w / image.width) + '%',
                theight: ((image.height / item.height) * 100) / (item.h / image.height) + '%',
                otwidth: image.width,
                otheight: image.height,
                otcenterX: image.centerX,
                otcenterY: image.centerY,
                imgWidth: item.w,
                imgHeight: item.h,
              })
            })
            item.gwidth = item.w
            item.gheight = item.h
          }
        }
      })
      let _datas = [...that.list, ...tpdata]
      this.list = _datas
    },
    async queryResembleImgList() {
      let that = this
      let result = await api.beSimilarList(this.curImgId, this.imgParams)
      let totalPage = result.total % that.imgParams.pageSize == 0 ? result.total / that.imgParams.pageSize : parseInt(result.total / that.imgParams.pageSize) + 1
      if (result.data && (result.list.length < that.imgParams.pageSize || that.imgParams.page >= totalPage)) {
        setTimeout(function () {
          that.hasMore = false
          that.nomore = true
        }, 1500)
      } else {
        setTimeout(function () {
          that.hasMore = true
        }, 1500)
      }
      setTimeout(function () {
        that.scrollLoaded = true
        that.isLoadedImg = true
      }, 1500)
      this.onPicSearch(result.list)
    },
  },
  async mounted() {
    // this.curImgId = this.imgid

    // let res = await api.imgInfo(this.imgurl)
    // this.info = res.data
    // this.queryResembleImgList()
  }
}
</script>

<style scoped lang="less">
.img-detail {
  .info-detail-mask {
    // position: fixed;
    // left: 0px;
    // right: 0px;
    // top: 0px;
    // background: rgba(0, 0, 0, 0.7);
    // z-index: 101;
    // width: 100%;
    // height: 100%;
  }
  .game-con-info {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 113;
    width: 100%;
    overflow-y: auto;
    height: 100%;
    &::-webkit-scrollbar {
      width: 3px;
      height: 8px;
      background-color: transparent;
    }
    /*滚动条的轨道*/
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
    /*滚动条的滑块按钮*/
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: #626262;
    }
    /*滚动条的上下两端的按钮*/
    &::-webkit-scrollbar-button {
      height: 0;
    }

    /* 两个滚动条的交汇处 */
    &::-webkit-scrollbar-corner {
      background-color: transparent;
    }
    .game-info {
      max-width: 1920px;
      margin: 0 auto;
      background: #000;
      position: relative;
      padding-top: 23px;
      padding-left: 61px;
      padding-right: 61px;
      z-index:102;
      // height: 100%;
      .top-bar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top-back {
          width: 44px;
          height: 44px;
          background: url('../assets/pro/gminfo_topback.svg') no-repeat;
          background-size: cover;
          transition: 0.2s all linear;
          &:hover {
            background: url('../assets/pro/gminfo_topback_hover.svg') no-repeat;
            background-size: cover;
          }
        }
        .right-funs {
          line-height: 44px;
          display: flex;
          user-select: none;
          align-items: center;
          .btn {
            font-size: 14px;
            color: #fff;
            font-weight: 500;
            line-height: 44px;
            background-color: #1c1c1e;
            border-radius: 8px;
            margin-right: 10px;
            padding: 0px 10px 0px 33px;
            min-width: 99px;
          }
          .clear-redborder {
            background-image: url('../assets/pro/imginfo/clear_rbd.svg');
            background-repeat: no-repeat;
            background-size: 18px 18px;
            background-position: 13px center;
          }
          .bw-preview {
            background-image: url('../assets/pro/imginfo/bw_preview.svg');
            background-repeat: no-repeat;
            background-size: 18px 18px;
            background-position: 13px center;
          }
          .img-search-to-img {
            background-image: url('../assets/pro/imginfo/img_search_to_img.svg');
            background-repeat: no-repeat;
            background-size: 18px 18px;
            background-position: 13px center;
          }
          .download {
            background-image: url('../assets/pro/imginfo/download.svg');
            background-repeat: no-repeat;
            background-size: 18px 18px;
            background-position: 10px center;
            min-width: 72px;
          }
          .fav-btn {
            background: #11CCB1;
            color: #fff;
            background-image: url('../assets/pro/imginfo/fav.svg');
            background-repeat: no-repeat;
            background-size: 18px 18px;
            background-position: 10px center;
            border-radius: 8px;
            width: 72px;
            padding-left: 10px;
            margin-left: 11px;
            text-align: center;
          }
          .close-modal-page {
            width: 20px;
            height: 20px;
            background: url('../assets/pro/close_modal_page.svg') no-repeat;
            background-size: cover;
            margin-left: 20px;
            position: relative;
          }
        }
      }
      .b-img-box {
        max-width: 1799px;
        margin: 0 auto;
        border-radius: 16px;
        border: 1px solid #2d2d2d;
        display: flex;
        margin-top: 23px;
        .left-m-img {
          display: flex;
          align-items: center;
          justify-content: center;
          max-height: 674px;
          height: 674px;
          overflow: hidden;
          width: 100%;
          .img-wrap {
            height: 100%;
            img {
              height: 100%;
              cursor: zoom-in;
              object-fit: contain;
            }
          }
        }
        .r-propertys {
          min-width: 323px;
          width: 323px;
          margin-left: 23px;
          padding: 20px;
          .title {
            font-size: 24px;
            font-weight: 500;
            color: #ffffff;
            line-height: 33px;
            &:after {
              content: '';
              min-width: 14px;
              height: 14px;
              background: url('../assets/pro/imginfo/allow_take.svg') no-repeat;
              background-position: right center;
              padding-right: 27px;
            }
          }
          .cate {
            color: #969696;
            font-size: 12px;
            margin-top: 2px;
          }
          .tag-tit {
            margin-top: 34px;
            .text {
              font-size: 16px;
              font-weight: 500;
              color: #ffffff;
              line-height: 22px;
              margin-bottom: 16px;
            }
            .tags-wrap {
              padding-right: 10px;
              max-height: 492px;
              overflow-y: auto;
              &::-webkit-scrollbar {
                width: 6px;
                height: 8px;
                background-color: transparent;
              }
              /*滚动条的轨道*/
              &::-webkit-scrollbar-track {
                background-color: transparent;
              }
              /*滚动条的滑块按钮*/
              &::-webkit-scrollbar-thumb {
                border-radius: 3px;
                background-color: #626262;
              }
              /*滚动条的上下两端的按钮*/
              &::-webkit-scrollbar-button {
                height: 0;
              }

              /* 两个滚动条的交汇处 */
              &::-webkit-scrollbar-corner {
                background-color: transparent;
              }
              .tags-box {
                font-size: 16px;
                user-select: none;
                span {
                  line-height: 40px;
                  border-radius: 8px;
                  border: 1px solid #2d2d2d;
                  display: inline-block;
                  width: 100%;
                  margin-bottom: 10px;
                  color: #969696;
                  padding-left: 20px;
                  cursor: pointer;
                  &:hover {
                    background: #2d2d2d;
                  }
                }
              }
            }
          }
        }
      }
      .face-area {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 20px;
        .l-face-area {
          .face-con {
            height: 44px;
            line-height: 44px;
            border-radius: 22px;
            background: #292929;
            width: 216px;
          }
          .send-mbox {
            display: flex;
            align-items: center;
            margin-top: 17px;
            .u-img {
              min-width: 34px;
              height: 34px;
              border-radius: 34px;
              overflow: hidden;
              margin-right: 12px;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .right {
              width: 281px;
              position: relative;
              display: flex;
              align-items: center;
              input {
                background: #242327;
                width: 100%;
                border: none;
                border: none;
                line-height: 44px;
                padding-left: 16px;
                font-size: 14px;
                color: #fff;
                border-radius: 22px;
              }
              .opbtns {
                position: absolute;
                right: 0px;
                display: flex;
                align-items: center;
                .face-btn {
                  width: 20px;
                  height: 20px;
                  background: url('../assets/pro/top_cmt_face.svg') no-repeat;
                  background-size: cover;
                  display: flex;
                  align-items: center;
                  margin-right: 13px;
                  &:after {
                    content: '';
                    width: 1px;
                    background: #484848;
                    height: 18px;
                    margin: 0px 13px;
                    position: absolute;
                    left: 20px;
                  }
                  &:hover {
                    background: url('../assets/pro/top_cmt_face_active.svg') no-repeat;
                    background-size: cover;
                  }
                }
                .send-btn {
                  width: 24px;
                  height: 24px;
                  background: url('../assets/pro/top_cmt_sendbtn.svg') no-repeat;
                  background-size: cover;
                  margin-left: 13px;
                  margin-right: 15px;
                }
              }
            }
          }
        }
        .author-info {
          .user {
            display: flex;
            align-items: center;
            .img-box {
              width: 34px;
              height: 34px;
              border-radius: 17px;
              overflow: hidden;
              display: block;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .name {
              font-size: 14px;
              color: #fff;
              font-weight: 500;
              margin-left: 10px;
            }
          }
          .collect-tip {
            font-size: 12px;
            line-height: 17px;
            margin-top: 10px;
            display: block;
            background: url('../assets/pro/imginfo/collect_to.svg') no-repeat;
            background-size: 18px 18px;
            background-position: left center;
            padding-left: 28px;
          }
        }
      }
      .other-tit {
        font-size: 26px;
        font-weight: 500;
        line-height: 37px;
        text-align: center;
        margin-top: 40px;
      }

      .mk-rd-datas {
        margin-top: 30px;
        .h-cover-ditem {
          width: 312px;
          .cover-box {
            display: flex;
            .mlft {
              width: 204px;
              min-width: 204px;
              height: 210px;
              border-radius: 16px;
              margin-right: 6px;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .mrt {
              .m-cover-bx {
                width: 102px;
                height: 102px;
                border-radius: 16px;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
                &:first-child {
                  margin-bottom: 6px;
                }
              }
            }
          }
          .u-bx {
            display: flex;
            align-items: center;
            margin-top: 8px;
            .avatar {
              width: 20px;
              height: 20px;
              object-fit: cover;
              margin-right: 7px;
              border-radius: 20px;
            }
            .name {
              font-size: 14px;
              color: #969696;
            }
          }
        }

        .waf-ligan-item {
          position: absolute;
          top: 10px;
          left: 10px;
          right: 10px;
          bottom: 10px;
          font-size: 1.2em;
          border: 2px solid #000;
          border-radius: 16px;
          transition: 0.1s all linear;
          overflow: hidden;
          &:hover {
            cursor: pointer;
            border: 2px solid #11CCB1;
            .hid-btn {
              display: inherit;
            }
          }
          .m-img {
            border-radius: 16px;
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
          .author {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            padding: 10px 13px;
            width: 164px;
            cursor: pointer;
            .ar-tit {
              font-size: 14px;
              font-weight: 500;
              color: #383737;
              line-height: 20px;
              margin-bottom: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              background: url('../assets/pro/take_tit_icon.svg') no-repeat;
              background-position: left center;
              padding-left: 22px;
            }
            .u-box {
              display: flex;
              padding-left: 20px;
              .name {
                font-size: 14px;
                color: #969696;
                font-weight: 500;
              }
              .avatar {
                width: 20px;
                height: 20px;
                border-radius: 20px;
                margin-right: 7px;
              }
            }
          }
          .like-icon-btn {
          }
          .fav-btn {
            background-color: #11CCB1;
            color: #fff;
            height: 44px;
            line-height: 44px;
            // width:82px;
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 14px;
            border-radius: 12px;
            cursor: pointer;
            background-image: url('../assets/pro/un_favicon.svg');
            background-repeat: no-repeat;
            background-position: 11px center;
            padding-left: 35px;
            padding-right: 12px;
            &:hover {
              background-color: #f34972;
            }
          }
          .select-btn {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 10px;
            top: 10px;
            background: url('../assets/pro/mutiple_select_pic.svg') no-repeat;
            background-size: cover;
            &.actived {
              background: url('../assets/pro/mutiple_selected_pic.svg') no-repeat;
              background-size: cover;
            }
          }
          .faved-btn {
            background-color: #fff;
            color: #000;
            height: 44px;
            line-height: 44px;
            // width:82px;
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 14px;
            border-radius: 12px;
            cursor: pointer;
            background-image: url('../assets/pro/faved_icon.svg');
            background-repeat: no-repeat;
            background-position: 11px center;
            padding-left: 35px;
            padding-right: 12px;
            opacity: 0.9;
            &:hover {
              opacity: 1;
            }
          }
          .xs-img-btn {
            background-image: url('../assets/pro/xs_img_cion.svg');
            background-repeat: no-repeat;
            background-position: center center;
            width: 34px;
            height: 34px;
            position: absolute;
            right: 3px;
            bottom: 14px;
            background-color: #fff;
            border-radius: 12px;
            cursor: pointer;
            opacity: 0.9;
            &:hover {
              opacity: 1;
            }
          }
          .hid-btn {
            display: none;
          }
        }
      }
    }
  }
}








</style>